<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
<!--文件域-->
<input type="file" name="file" id="file" style="display:none" multiple @change="upload"/>
<button onclick="chooseImage">选择文件</button>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="qiniu.js"></script>

<script>
  /**
   * 选择图片
   */
  function chooseImage() {
    // 当前浏览器是否兼容文件系统
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      document.getElementById('file').click();
    } else {
      alert('The File APIs are not fully supported in this browser.');
    }
  }

  function upload(event) {
    let file = event.target.files[0];
    if (!file) {
      return;
    }
    if (this.maxSize) {
      // TODO:文件过滤
    }
    // 获取Token值
    qiniu.getToken(constants.qiniu.userScene).then(res => {
      let token = res.token;
      let domain = res.domain;
      // 上传到七牛
      qiniu.upload(file, token, progess(event)).then(res => {
        let mrk = res.mrk;
        let key = res.fileNme;
        if (mrk) {
          let url = qiniu.getUrl(domain, key);
          let thumb = qiniu.getThumb(domain, key);
          this.fileList[this.fileIndex].url = url;
          this.fileList[this.fileIndex].thumb = thumb;
          // 清空当前目标值
          event.target.value = null;
          console.log("上传成功.");
        } else {
          console.log("上传文件失败.");
        }
      }, res => {
        console.log("无法获取图片服务.");
      })
    }, res => {
      console.log("获取token失败!");
    });
  }

  /**
   * 进度条处理
   */
  function progess(event) {
    // 控制进度条
      let rate = parseInt(event.loaded / event.total * 100);
      console.log(rate);
      if (rate == 100) {
        this.isLoading = false;// 显示进度条
      } else {
        this.width = rate + '%';// 进度条动画
        this.isLoading = true;// 不显示进度条
      }
    }


</script>
</html>
